<template>
  <div class="exam-parts-management">
    <div class="management-header">
      <h3>考核组成管理</h3>
      <div class="header-info" v-if="selectedMission && Object.keys(selectedMission).length > 0">
        <span class="mission-info">
          {{ selectedMission.courseName }} - {{ selectedMission.termName }}
        </span>
        <div class="class-tags">
          <el-tag 
            v-for="(className, index) in selectedMission.classNames" 
            :key="index" 
            size="small"
            style="margin-right: 5px;"
          >
            {{ className }}
          </el-tag>
        </div>
      </div>
    </div>
    
    <div v-if="!selectedMission || Object.keys(selectedMission).length === 0" class="no-selection">
      <el-empty description="请从左侧列表选择一个教学任务来管理考核组成" />
    </div>
    
    <div v-else class="exam-parts-content">
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" @click="handleAddExamPart">
          <el-icon><Plus /></el-icon> 添加考核组成
        </el-button>
        <el-button type="success" @click="handleBatchImport">
          <el-icon><Upload /></el-icon> 批量导入
        </el-button>
        <el-button 
          type="warning" 
          @click="handleCopyFromOther"
          :disabled="examParts.length > 0"
          plain
        >
          <el-icon><DocumentCopy /></el-icon> 从其他任务复制
        </el-button>
      </div>
      
      <!-- 考核组成表格 -->
      <el-table
        :data="examParts"
        style="width: 100%"
        v-loading="loading"
        border
      >
        <el-table-column label="组成名称" prop="name" min-width="120" resizable />
        <el-table-column label="比例" width="100" resizable>
          <template #default="scope">
            <span>{{ scope.row.proportion }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="计分方式" prop="scoreTypeName" width="120" resizable />
        <el-table-column label="考核类型" width="120" resizable>
          <template #default="scope">
            <el-tag 
              v-if="scope.row.examPartType === 'FORMATIVE' || scope.row.isFormative" 
              type="success"
            >
              形成性
            </el-tag>
            <el-tag 
              v-else-if="scope.row.examPartType === 'FINAL' || scope.row.isFinal" 
              type="warning"
            >
              终结性
            </el-tag>
            <el-tag 
              v-else-if="scope.row.examPartType === 'OTHER'" 
              type="info"
            >
              其它
            </el-tag>
            <el-tag v-else type="info">未设置</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right" resizable>
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEditExamPart(scope.row)">
              <el-icon><Edit /></el-icon> 编辑
            </el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="handleDeleteExamPart(scope.row)"
            >
              <el-icon><Delete /></el-icon> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 比例汇总 -->
      <div class="proportion-summary">
        <el-alert
          :title="`总比例: ${totalProportion}% ${totalProportion === 100 ? '(比例正确)' : '(比例有误，请调整)'}`"
          :type="totalProportion === 100 ? 'success' : 'warning'"
          show-icon
          :closable="false"
        />
      </div>
    </div>

    <!-- 从其他任务复制对话框 -->
    <CopyFromOtherDialog
      v-model:visible="copyFromOtherDialogVisible"
      :target-mission="selectedMission"
      @copy-success="handleCopyFromOtherSuccess"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Plus, Upload, Edit, Delete, DocumentCopy } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import CopyFromOtherDialog from '@/components/teaching-mission/dialogs/CopyFromOtherDialog.vue'

const props = defineProps({
  selectedMission: {
    type: Object,
    default: () => ({})
  },
  examParts: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits([
  'add-exam-part',
  'edit-exam-part', 
  'delete-exam-part',
  'batch-import',
  'batch-copy-success'
])

// 复制相关状态
const copyFromOtherDialogVisible = ref(false)

const totalProportion = computed(() => {
  return props.examParts.reduce((sum, part) => sum + (part.proportion || 0), 0)
})

const handleAddExamPart = () => {
  emit('add-exam-part')
}

const handleEditExamPart = (row) => {
  emit('edit-exam-part', row)
}

const handleDeleteExamPart = (row) => {
  emit('delete-exam-part', row)
}

const handleBatchImport = () => {
  emit('batch-import')
}

// 处理从其他任务复制
const handleCopyFromOther = () => {
  if (!props.selectedMission || !props.selectedMission.id) {
    ElMessage.warning('请选择一个教学任务')
    return
  }
  
  if (props.examParts.length > 0) {
    ElMessage.warning('当前教学任务已有考核组成，无法复制。请先清空现有设置。')
    return
  }
  
  copyFromOtherDialogVisible.value = true
}

// 处理从其他任务复制成功回调
const handleCopyFromOtherSuccess = () => {
  ElMessage.success('复制考核方案成功')
  copyFromOtherDialogVisible.value = false
  // 通知父组件刷新数据
  emit('batch-copy-success')
}

const formatDate = (dateStr) => {
  if (!dateStr) return '--'
  try {
    return new Date(dateStr).toLocaleDateString('zh-CN')
  } catch {
    return '--'
  }
}
</script>

<style scoped>
.exam-parts-management {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.management-header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
}

.management-header h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.header-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mission-info {
  font-weight: 500;
  color: #606266;
}

.class-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.no-selection {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.exam-parts-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.action-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.proportion-summary {
  margin-top: 20px;
}
</style>
